<template>
    <ul class="recommand-doctor">
        <li v-for="recommand_doctor in recommand_doctor_list"       
        :key='recommand_doctor.id'>
            <div class="img-container bg-container"
            :style="{backgroundImage:'url('+recommand_doctor.head_img+')'}"
            >
            </div>
            <div class="doctor-info">
                <span>{{ recommand_doctor.doctor_name }}</span>
                <p>{{ recommand_doctor.posts }}</p>
            </div>
        </li>
    </ul>
</template>
<script>
    export default{
        props:['recommand_doctor_list'],
    }
</script>
<style lang="less" scoped>
    ul{
        position: relative;
        z-index: 3;
        li{
            overflow: hidden;
            width: 246px;
            margin-bottom: 15px;
            cursor: pointer;
            .img-container{
                width: 82px;
                height: 82px;
                float: left;
            }
            .doctor-info{
                float: right;
                width: 150px;
                span{
                    display: inline-block;
                    margin-top: 5px;
                }
                p{
                    margin-top: 26px;
                }
            }
        }
    }
</style>
